<template>
  <div :class="{'fixed al0 ab0 at0 al0':isScreen}" data="editor" class="w-all rel flex bc-fff fd-c ra-5 editor sha-card h-all">
    <div class="w-all bb-e flex fs-14 ai-c pb5 pl5 fw">
      <div v-for="(item, index) in icons" :class="{'sIcon':item.select,...item.name}" class="rel" :key="index">
        <div v-if="!exclude.includes(item.name)" :title="item.title" onmousedown="return false" @click="btnAction(item)" class="w-28 h-28 flex ai-c jc-c ra-3 mt5 bc-fff mr5 hand lh-25 centers b-d" type="button">
          <svg style="fill:#888" viewBox="0 0 1024 1024" :width="item.size" :height="item.size">
            <path :d="item.icon"></path>
          </svg>
        </div>
        <div v-if="isModle=='fs'&&item.select" class="abs al0 zi-100 at29">
          <ul @click="btnFontSize" class="sha-6 mt10 w-140 bc-fff pp10 h-160 autoy flex fw jc-b ra-5">
            <li :data-fs="index+1" v-for="(item, index) in fontSize" class="w-55 h-30 b-e flex ai-c hand jc-c ra-5 fs-18 fc-999 mt2" :key="index">{{item}}px</li>
          </ul>
        </div>
        <div v-if="isModle=='header'&&item.select" class="abs al0 zi-100 at29">
          <div @click="btnHeader" class="sha-6 w-85 mt10 bc-fff pp10 flex fd-c ra-5">
            <h1 data-item='h1' class="pp10 hand">h1</h1>
            <h2 data-item='h2' class="pp10 hand">h2</h2>
            <h3 data-item='h3' class="pp10 hand">h3</h3>
            <h4 data-item='h4' class="pp10 hand">h4</h4>
            <h5 data-item='h5' class="pp10 hand">h5</h5>
            <h6 data-item='h6' class="pp10 hand">h6</h6>
          </div>
        </div>
        <div v-if="isModle=='link'&&item.select" class="abs al0 zi-100 at39">
          <div class="w-250 bc-fff flex fd-c sha-5 pp15">
            <span class="fb fs-14 mb5">插入链接</span>
            <input v-model="linkText" placeholder="请输入网址如https://wwww.xx.cn" class="ipt ipt-small" type="text">
            <div @click="btnLink" class="btn centers pt5 pb5 mt5 btn-primary w-50 ra-3">插入</div>
          </div>
        </div>
        <div v-if="isModle=='table'&&item.select" class="abs al0 zi-100 at39">
          <div class="w-200 bc-fff flex fd-c sha-5 pp15">
            <span class="fb mb10">插入表格</span>
            <div class="flex ai-c">
              行：<input v-model="table.line" placeholder="数量" class="ipt w-55 ipt-small mr10" type="text">
              列：<input v-model="table.cell" placeholder="数量" class="ipt w-55 ipt-small" type="text">
            </div>
            <div @click="btnTable" class="btn centers pt5 pb5 mt10 btn-primary w-50 ra-3">插入</div>
          </div>
        </div>
        <div v-if="isModle=='formula'&&item.select" class="abs al0 zi-100 at39">
          <div class="rel">
            <div class="bc-fff" id="formula"></div>
            <span @click="btnFormula" class="abs pp10 hand ab10 ar10">插入</span>
          </div>
        </div>
        <div v-if="(isModle=='fc'||isModle=='bc')&&item.select" class="abs al0 zi-100 at29">
          <div @click="btnColor" class="sha-6 mt10 bc-fff pp10 flex fd-c ra-5">
            <div class=""><span class=" fc-aa">{{isModle=='fc'?'字体颜色':'背景颜色'}}</span></div>
            <ul class="flex w-200 mt10 jc-b ai-c">
              <li :data-color="item" v-for="(item, index) in colors.main" :key="index" :style="{'background-color':item}" class="flex hand h-15 w-15"></li>
            </ul>
            <div class="flex w-200 mt5 jc-b">
              <ul v-for="(item, index) in colorPlan" :key="index" class="flex fd-c ai-c">
                <li :data-color="child" v-for="(child, index) in item" :key="index" :style="{'background-color':child}" class="flex hand h-15 w-15"></li>
              </ul>
            </div>
            <div class=" mt10">标准颜色</div>
            <ul class="flex w-200 mt5 jc-b ai-c">
              <li :data-color="item" v-for="(item, index) in colors.hot" :key="index" :style="{'background-color':item}" class="flex hand h-15 w-15"></li>
            </ul>
          </div>
        </div>
        <div v-if="isModle=='image'&&item.select" class="abs al0 zi-100 at29">
          <div class="sha-6 w-200 mt10 bc-fff pp10 flex fd-c ra-5">
            <div class="flex h-27 bb-e ai-c">
              <span @click="imageType=1" :class="{'fb bb-3':imageType==1}" class="w-60 hand centers h-all">上传图片</span>
              <span @click="imageType=2" :class="{'fb bb-3':imageType==2}" class="w-60 hand centers h-all">网络图片</span>
            </div>
            <div class="mt10 w-all">
              <div v-if="imageType==1" class="w-all rel">
                <div class="w-all flex ai-c jc-c">
                  <svg viewBox="0 0 1024 1024" style="fill:#aaa" xmlns="http://www.w3.org/2000/svg" p-id="39575" width="80" height="80">
                    <path
                      d="M52.736 128.512c-9.216 2.56-20.992 11.264-25.6 18.432-8.704 12.8-9.216 37.888-9.216 350.208 0 361.472-0.512 355.328 26.624 367.616 8.704 4.096 110.08 5.632 337.408 5.632h324.608l-17.92-26.112c-22.016-31.744-33.28-68.608-33.28-107.52 0-33.28 15.872-88.064 30.72-107.008l9.728-12.8-36.864-37.376-36.864-37.376L552.96 614.4l-69.12 71.68-94.208-117.76-94.72-117.76-93.696 140.8-93.696 140.8h-40.96V174.08H896v367.104l19.456 6.144c10.24 3.584 22.016 7.68 25.6 8.704 4.608 2.56 6.144-38.912 6.144-196.096 0-175.616-1.024-200.192-8.192-210.944-18.944-26.624-11.264-26.112-456.192-25.6-240.64 0-420.864 2.56-430.08 5.12z"
                      p-id="39576"></path>
                    <path
                      d="M693.76 270.848c-24.064 6.144-36.864 14.336-52.224 34.816-11.264 14.848-14.336 24.576-15.872 52.224-1.536 28.672 0 36.352 10.24 51.712 18.432 27.648 51.2 42.496 87.04 39.424 55.296-4.608 82.944-34.304 82.944-88.064 0-18.944-3.584-37.376-9.216-47.616-16.384-31.744-65.024-51.712-102.912-42.496zM794.112 589.312c-75.264 29.696-114.176 116.224-89.6 199.68 11.776 39.936 59.392 87.04 100.352 98.816 62.976 17.92 121.856 4.096 163.328-38.4 33.792-34.816 47.104-71.68 44.544-122.368-3.584-60.928-31.744-104.96-83.456-132.096-36.352-18.432-96.256-20.992-135.168-5.632z m103.424 99.328l39.936 43.52h-57.344l1.536 56.32 1.536 56.32h-53.76V732.672l-26.624-1.536-26.624-1.536 37.888-42.496c20.992-23.04 38.912-41.984 40.448-41.984 2.048 0 20.992 19.456 43.008 43.52z"
                      p-id="39577"></path>
                  </svg>
                </div>
                <input ref="input" @change="upfileImage(1)" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" class="abs op-0 w-all hand at0 ab0 ar0 ab0" type="file">
              </div>
              <div class="w-all flex fd-c ai-e" v-if="imageType==2">
                <input v-model="upImageFile" class="h-30 ra-5 b-d w-all pp10 fs-12" placeholder="输入网络图片地址" type="text">
                <button @click="upfileImage(2)" class="b-d w-50 bc-fff lh-20 mt6 fc-aa ra-5 fs-12">插入</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div ref="editor" v-if="resule" autocorrect="off" autocomplete="off" @keydown="btnKeypress" spellcheck="false" @mousedown="mousedown" contenteditable="true" v-html="innerText" @input="changeText" @focus="isChange = false" @blur="blurFunc" class="h-all lh-20 editors autoy flex-1 outline pp10 w-all wrap"></div>
  </div>
</template>
<script setup lang='ts'>
import { nextTick, onMounted, ref, watch } from "vue"
import formulaEditor from 'easy-formula-editor'
const isFormula = ref(false);
const ps = defineProps({
  exclude: { type: Array, default: [] },
  modelValue: { type: [Array, String, Number, Boolean], default: false },
  upFile: { type: Function }
})

const emit = defineEmits(["update:modelValue", "change"]);

const editor = ref(null)
const input = ref(null)

const innerText = ref("");
const resule = ref(true);
const isChange = ref(true);
const isFirst = ref(true);
const isScreen = ref(false)
const upImageFile = ref("")
const selectedRange = ref(null)
const isModle = ref("")
const fontSize = ref([10, 13, 16, 18, 24, 32, 48])
const imageType = ref(1);
const isImage = ref(false);
const isTable = ref(false);
const linkText = ref("")
const icons = [
  // { size: 13, select: false, name: 'header', icon: 'M961.142857 950.857143q-25.142857 0-75.714286-2t-76.285714-2q-25.142857 0-75.428571 2t-75.428571 2q-13.714286 0-21.142857-11.714286t-7.428571-26q0-17.714286 9.714286-26.285714t22.285714-9.714286 29.142857-4 25.714286-8.571429q18.857143-12 18.857143-80l-0.571429-223.428571q0-12-0.571429-17.714286-7.428571-2.285714-28.571429-2.285714l-385.714286 0q-21.714286 0-29.142857 2.285714-0.571429 5.714286-0.571429 17.714286l-0.571429 212q0 81.142857 21.142857 93.714286 9.142857 5.714286 27.428571 7.428571t32.571429 2 25.714286 8.571429 11.428571 26q0 14.857143-7.142857 27.428571t-20.857143 12.571429q-26.857143 0-79.714286-2t-79.142857-2q-24.571429 0-73.142857 2t-72.571429 2q-13.142857 0-20.285714-12t-7.142857-25.714286q0-17.142857 8.857143-25.714286t20.571429-10 27.142857-4.285714 24-8.571429q18.857143-13.142857 18.857143-81.714286l-0.571429-32.571429 0-464.571429q0-1.714286 2.857143-14.857143t0-20.857143-0.857143-22-2-24-3.714286-20.857143-6.285714-18-9.142857-10.285714q-8.571429-5.714286-25.714286-6.857143t-30.285714-1.142857-23.428571-8-10.285714-25.714286q0-14.857143 6.857143-27.428571t20.571429-12.571429q26.285714 0 79.142857 2t79.142857 2q24 0 72.285714-2t72.285714-2q14.285714 0 21.428571 12.571429t7.142857 27.428571q0 17.142857-9.714286 24.857143t-22 8.285714-28.285714 2.285714-24.571429 7.428571q-20 12-20 91.428571l0.571429 182.857143q0 12 0.571429 18.285714 7.428571 1.714286 22.285714 1.714286l399.428571 0q14.285714 0 21.714286-1.714286 0.571429-6.285714 0.571429-18.285714l0.571429-182.857143q0-79.428571-20-91.428571-10.285714-6.285714-33.428571-7.142857t-37.714286-7.428571-14.571429-28.285714q0-14.857143 7.142857-27.428571t21.428571-12.571429q25.142857 0 75.428571 2t75.428571 2q24.571429 0 73.714286-2t73.714286-2q14.285714 0 21.428571 12.571429t7.142857 27.428571q0 17.142857-10 25.142857t-22.857143 8.285714-29.428571 1.714286-25.142857 7.142857q-20 13.142857-20 92l0.571429 538.857143q0 68 19.428571 80 9.142857 5.714286 26.285714 7.714286t30.571429 2.571429 23.714286 8.857143 10.285714 25.428571q0 14.857143-6.857143 27.428571t-20.571429 12.571429z', type: 'header', title: '标题' },
  { size: 22, name: 'image', icon: 'M811.272038 156.318208l-595.873246 0c-46.818305 0-85.124749 38.306444-85.124749 85.124749l0 535.616884c0 46.818305 38.306444 85.124749 85.124749 85.124749l595.873246 0c46.818305 0 85.124749-38.306444 85.124749-85.124749l0-535.616884C896.396787 194.624652 858.090343 156.318208 811.272038 156.318208zM318.595129 255.961626c42.952254 0 77.771271 34.819017 77.771271 77.771271s-34.819017 77.771271-77.771271 77.771271-77.771271-34.819017-77.771271-77.771271S275.642874 255.961626 318.595129 255.961626zM215.398792 734.497467l148.9678-197.609637 106.405425 127.687124 148.968823-191.530175 191.530175 261.45371L215.398792 734.49849z', type: '', title: '上传图片' },
  { size: 15, name: 'formula', icon: 'M95.941353 671.543695l-71.544053 0.961244-1.190112-91.547092 133.384113-1.785168 34.375933 82.392383L333.826472 91.547092h696.39873v91.547092H405.141657L212.618122 951.540477zM446.887131 883.42944l157.369451-266.722453-152.746323-292.538733h415.944213l57.766215 137.320638-84.360645 35.474498-34.192839-81.431138h-204.150016l106.377722 203.646506-101.800367 172.70359h200.625453l33.735103-73.786957 83.170533 38.083591-58.178177 127.250458z', type: '', title: '公式' },
  { size: 18, name: 'table', icon: 'M959.825022 384.002258V191.939717C959.825022 121.2479 902.517291 63.940169 831.825474 63.940169H191.939717C121.2479 63.940169 63.940169 121.2479 63.940169 191.939717v639.885757C63.940169 902.517291 121.2479 959.825022 191.939717 959.825022h639.885757c70.691817 0 127.999548-57.307731 127.999548-127.999548V384.002258zM146.66502 146.66502a63.737872 63.737872 0 0 1 45.336109-18.784682h639.997742A63.961844 63.961844 0 0 1 895.884854 192.001129V320.062089H127.880338V192.001129A63.737872 63.737872 0 0 1 146.66502 146.66502z m269.1267 461.308451v-223.971213h192.181751v223.971213h-192.181751z m192.181751 63.940169v223.971214h-192.181751v-223.971214h192.181751z m-256.12192-63.940169H127.880338v-223.971213h223.971213v223.971213z m-205.186531 269.235073a63.466939 63.466939 0 0 1-18.784682-45.209673V671.91364h223.971213v223.971214H192.001129a63.625887 63.625887 0 0 1-45.336109-18.67631z m749.219834-45.209673A63.763159 63.763159 0 0 1 831.998871 895.884854H671.91364v-223.971214h223.971214v160.085231z m0-224.0254h-223.971214v-223.971213h223.971214v223.971213z', type: '', title: '插入表格' },
  { size: 15, name: 'fc', icon: 'M648.272501 0H384.768171L0.000682 1024h242.952698l77.34577-255.829447h382.038641l78.710193 255.829447h244.317122zM369.418404 599.408394l120.069287-336.330446a367.541639 367.541639 0 0 0 18.334444-86.55563h6.139906a380.759494 380.759494 0 0 0 16.287808 89.284477l119.387076 333.686876H369.418404z', type: '', title: '字体颜色' },
  { size: 15, name: 'bc', icon: 'M896 384c-46.72-46.72-160.64-25.6-219.52-10.24L448.64 152.96l-21.76 21.76L313.6 65.28 223.36 152.96 336.64 262.4 66.56 524.16v2.56L448.64 896l359.68-349.44L960 693.12S960 448 896 384zM194.56 524.16l255.36-247.68 254.72 247.68H194.56z', type: '', title: '背景色' },
  { size: 18, name: 'fs', icon: 'M296.152 587.982l89.392-288.243 89.61 288.243H296.151m169.934-398.82h-136.23l-203.84 645.676h94.45l48.225-153.667h236.155l49.014 153.667h118.296L466.086 189.16m214.128 496.062l51.859-137.725 51.88 137.725h-103.74m98.502-201.847h-78.918L636.415 654.41l27.467 86.184 0.395-1.244h136.826l28.466 88.906h68.412L778.715 483.376', type: 'fs', title: '字体大小' },
  { size: 15, name: 'link', icon: 'M521.6 361.6c-8-14.4-9.6-32-8-48 3.2-16 9.6-30.4 22.4-41.6l1.6-1.6L704 102.4l1.6-1.6c16-14.4 35.2-20.8 54.4-20.8 19.2 0 40 8 54.4 22.4l107.2 107.2 1.6 1.6c14.4 14.4 20.8 33.6 20.8 52.8 0 20.8-8 40-22.4 54.4L752 488c-11.2 11.2-27.2 19.2-43.2 22.4-16 1.6-33.6 0-48-8-19.2-9.6-43.2-1.6-52.8 17.6-9.6 19.2-1.6 43.2 17.6 52.8 28.8 14.4 62.4 20.8 94.4 14.4 32-4.8 62.4-19.2 86.4-43.2L976 377.6l1.6-3.2C1008 344 1024 304 1024 264c0-38.4-14.4-78.4-43.2-107.2l-1.6-1.6L872 48c-32-32-72-48-112-48-38.4 0-78.4 14.4-108.8 43.2l-1.6 1.6-168 169.6-1.6 1.6c-24 24-38.4 54.4-44.8 84.8-4.8 32 0 65.6 14.4 96 9.6 19.2 33.6 27.2 52.8 17.6 20.8-9.6 28.8-33.6 19.2-52.8z m129.6-44.8l-334.4 336c-16 14.4-16 40 0 54.4 14.4 16 40 16 54.4 0l334.4-334.4c16-14.4 16-40 0-56-14.4-16-38.4-16-54.4 0z m0-272l52.8 1.6c-14.4-14.4-36.8-16-52.8-1.6z m328 112l-1.6 52.8c14.4-14.4 16-38.4 1.6-52.8zM502.4 662.4c8 14.4 9.6 32 8 48-3.2 16-9.6 30.4-22.4 41.6l-1.6 1.6-168 168-1.6 1.6c-14.4 14.4-33.6 20.8-52.8 20.8-19.2 0-40-8-54.4-22.4l-107.2-107.2-1.6-1.6c-14.4-14.4-20.8-33.6-20.8-52.8 0-19.2 8-40 22.4-54.4l1.6-1.6L272 534.4c11.2-11.2 27.2-19.2 41.6-20.8 16-3.2 33.6 0 48 8 19.2 9.6 43.2 1.6 52.8-17.6 9.6-19.2 1.6-43.2-17.6-52.8-30.4-16-64-19.2-94.4-14.4-32 4.8-62.4 19.2-86.4 43.2L48 648l-1.6 1.6C16 680 1.6 720 1.6 760c0 38.4 14.4 78.4 43.2 108.8l1.6 1.6 107.2 107.2C184 1008 224 1024 264 1024c38.4 0 78.4-14.4 108.8-43.2l1.6-3.2 168-168 1.6-1.6c24-24 38.4-54.4 43.2-84.8 4.8-32 0-65.6-14.4-96-9.6-19.2-33.6-27.2-52.8-17.6-19.2 9.6-27.2 33.6-17.6 52.8z m-129.6 318.4l-52.8-3.2c14.4 14.4 36.8 16 52.8 3.2zM44.8 867.2l1.6-52.8c-14.4 14.4-14.4 38.4-1.6 52.8z', type: '', title: '链接' },
  { size: 13, name: 'bold', icon: 'M385.692278 918.576916 390.80771 919.307658C421.012953 920.769221 443.423035 921.499963 458.03843 921.499963 545.73119 921.499963 609.551045 905.545019 649.499963 873.63458 689.448881 841.724219 709.423104 790.449073 709.423104 719.807724 709.423104 655.986846 690.66689 608.365568 653.153831 576.942316 615.640852 545.519065 559.372209 529.807675 484.346171 529.807675 462.422961 529.807675 444.153935 530.051308 429.538462 530.538496 414.922988 531.025605 400.307751 531.756426 385.692278 532.730801L385.692278 918.576916ZM386.423099 445.769255C390.320522 446.256443 395.192241 446.621775 401.038494 446.865408 406.884667 447.108962 415.410176 447.23074 426.615414 447.23074 504.5645 447.23074 561.929295 431.51935 598.711532 400.096177 635.49377 368.672926 653.884652 319.590085 653.884652 252.846159 653.884652 194.384345 636.833477 151.025822 602.730732 122.76925 568.628066 94.512679 516.256768 80.38463 445.615419 80.38463 433.922993 80.38463 415.410412 81.358927 390.076889 83.307678L385.692278 83.307678 386.423099 445.769255ZM78.769231 0 528.192276 0C638.295434 0 721.115136 19.608812 776.653824 58.82691 832.192591 98.045086 859.961502 156.62781 859.961502 234.576896 859.961502 293.525898 841.936108 342.852372 805.884613 382.557657 769.833118 422.26302 716.731156 451.371717 646.576916 469.884613 732.320926 471.346176 799.063828 493.268992 846.80767 535.653849 894.551513 578.038705 918.423079 636.499653 918.423079 711.038425 918.423079 805.551734 886.026004 878.018954 821.23075 928.442289 756.435574 978.865625 663.141612 1004.076898 541.346186 1004.076898L78.769231 1004.076898 78.769231 931.000005 167.19234 922.961526 191.307697 899.576911 191.307697 101.57694 167.19234 80.38463 78.769231 73.076894 78.769231 0Z', type: 'cmd', title: '加粗' },
  { size: 15, name: 'italic', icon: 'M682.666667 85.333333L512 938.666667h170.666667v85.333333H170.666667v-85.333333h170.666666L512 85.333333H341.333333V0h512v85.333333H682.666667z', type: 'cmd', title: '斜体' },
  { size: 13, name: 'underline', icon: 'M0 945.230769 945.230769 945.230769 945.230769 1024 0 1024 0 945.230769ZM0 0 407.076943 0 407.076943 61.934356 319.153861 68.127823 299.076923 86.088783 299.076923 530.158041C299.076923 614.802038 317.076716 675.290663 353.076933 711.625649 389.077071 747.960635 448.153442 766.127892 530.307702 766.127892 606.000364 766.127892 660.807522 746.825177 694.730752 708.219274 728.653982 669.613371 745.61536 606.337733 745.61536 518.390469L745.61536 91.043525 724.153817 69.366469 633.461524 61.934356 633.461524 0 955.384596 0 955.384596 61.934356 868.846119 69.366469 849.461563 91.043525 849.461563 531.396687C849.461563 649.072561 819.923338 734.334661 760.846178 787.185585 701.76894 840.03651 606.462188 866.461538 474.923087 866.461538 406.153531 866.461538 345.807951 857.481137 293.884613 839.520098 241.961275 821.55906 201.230887 795.856581 171.692347 762.411796 149.076834 735.986373 133.038474 705.74206 123.57695 671.677991 114.115348 637.613922 109.384625 588.789524 109.384625 525.203298L109.384625 86.088783 89.307687 68.127823 0 61.934356 0 0Z', type: 'cmd', title: '下划线' },
  { size: 13, name: 'quote', icon: 'M872.369231 128c-177.230769 0-313.107692 137.846154-313.107693 315.076923V866.461538c0 15.753846 13.784615 29.538462 29.538462 29.538462h334.769231c15.753846 0 29.538462-13.784615 29.538461-29.538462V531.692308c0-15.753846-13.784615-29.538462-29.538461-29.538462H677.415385v-59.076923c0-98.461538 96.492308-196.923077 194.953846-196.923077h51.2c15.753846 0 29.538462-13.784615 29.538461-29.538461V157.538462c0-15.753846-13.784615-29.538462-29.538461-29.538462h-51.2z m-488.369231 0c-177.230769 0-313.107692 137.846154-313.107692 315.076923V866.461538c0 15.753846 13.784615 29.538462 29.538461 29.538462h334.769231c15.753846 0 29.538462-13.784615 29.538462-29.538462V531.692308c0-15.753846-13.784615-29.538462-29.538462-29.538462H189.046154v-59.076923c0-98.461538 96.492308-196.923077 194.953846-196.923077h51.2c15.753846 0 29.538462-13.784615 29.538462-29.538461V157.538462c0-15.753846-13.784615-29.538462-29.538462-29.538462h-51.2z', type: 'quote', title: '引用' },
  { size: 13, name: 'strikethrough', icon: 'M965.612 470.938H722.089c-13.491-12.97-27.55-24.28-42.189-33.9-23.926-15.693-57.6-33.377-101.023-53.038-43.433-19.656-72.192-33.014-86.277-40.054-43.136-20.833-64.706-53.852-64.706-99.046 0-25.528 8.069-48.64 24.212-69.33 16.138-20.69 38-33.08 65.593-37.197 14.668-2.345 25.528-3.522 32.568-3.522 44.902 0 83.338 15.114 115.328 45.337 24.94 20.839 44.749 48.348 59.428 82.535 14.669 34.19 22.005 55.982 22.005 65.367h26.855l-12.77-259.712h-23.331c0 13.501-2.35 24.212-7.04 32.133-6.754 8.514-13.942 12.764-21.57 12.764-6.462 0-13.8-2.345-22.012-7.045-36.684-19.656-68.229-32.42-94.638-38.293-26.409-5.867-62.658-8.806-108.723-8.806-63.683 0.88-117.463 20.03-161.331 57.446-43.873 37.417-68.89 93.978-75.05 169.698 0 74.245 19.513 130.227 58.543 167.93 5.919 5.72 12.2 11.285 18.775 16.727H64.486v72.561h386.125c4.972 2.033 10 4.045 15.135 6.011 52.234 19.082 90.824 43.873 115.768 74.388 24.94 30.526 37.417 76.155 37.417 136.899-4.992 37.269-20.91 65.813-47.76 85.617-26.848 19.809-57.88 29.716-93.096 29.716-40.791 0-74.988-12.032-102.564-36.096-33.167-27.878-57.078-61.256-71.752-100.147-14.679-38.881-22.01-65.654-22.01-80.333h-21.566l-11.003 277.76h27.29c0-15.55 5.284-27.581 15.846-36.096 5.868-3.522 11.884-5.284 18.048-5.284 5.868 0 13.788 2.356 23.772 7.045 49.004 32.87 117.53 50.325 205.568 52.383 39.02 0 71.45-3.676 97.28-11.003 35.216-9.687 65.51-28.175 90.9-55.465 25.38-27.29 44.524-59.494 57.442-96.62 12.908-37.12 19.369-75.934 19.369-116.428 0-50.918-9.2-95.027-27.571-132.347h188.488v-72.555z', type: 'cmd', title: '删除线' },
  // { size: 13, name: 'unlink', icon: 'M308.35 939.41c-60 0-116.23-23.21-158.39-65.37s-65.37-98.41-65.37-158.39S107.8 599.41 150 557.25l135.73-135.76A32 32 0 0 1 331 466.75L195.22 602.51a160 160 0 0 0 226.27 226.27L557.25 693a32 32 0 0 1 45.26 45.25L466.74 874c-42.15 42.2-98.4 65.41-158.39 65.41zM672 896a32 32 0 0 1-32-32v-64a32 32 0 0 1 64 0v64a32 32 0 0 1-32 32z m128-64a31.9 31.9 0 0 1-22.63-9.37l-64-64a32 32 0 0 1 45.26-45.26l64 64A32 32 0 0 1 800 832z m64-128h-64a32 32 0 0 1 0-64h64a32 32 0 0 1 0 64z m-148.35-92.12A32 32 0 0 1 693 557.26l135.78-135.77a160 160 0 0 0-226.27-226.27L466.75 331a32 32 0 0 1-45.26-45.25L557.26 150c42.15-42.16 98.4-65.37 158.39-65.37S831.88 107.8 874 150s65.37 98.41 65.37 158.39S916.2 424.59 874 466.75L738.27 602.51a31.86 31.86 0 0 1-22.62 9.37zM224 384h-64a32 32 0 0 1 0-64h64a32 32 0 0 1 0 64z m64-64a31.9 31.9 0 0 1-22.63-9.37l-64-64a32 32 0 0 1 45.26-45.26l64 64A32 32 0 0 1 288 320z m64-64a32 32 0 0 1-32-32v-64a32 32 0 0 1 64 0v64a32 32 0 0 1-32 32z', type: 'cmd', title: '取消链接' },
  { size: 13, name: 'justifyLeft', icon: 'M0 0h1228.8v204.8H0V0z m0 409.6h1228.8v204.8H0V409.6z m0 409.6h614.4v204.8H0V819.2z', type: 'cmd', title: '居左' },
  { size: 13, name: 'justifyCenter', icon: 'M307.2 0h614.4v204.8H307.2V0zM0 409.6h1228.8v204.8H0V409.6z m307.2 409.6h614.4v204.8H307.2V819.2z', type: 'cmd', title: '居中' },
  { size: 13, name: 'justifyRight', icon: 'M0 0h1228.8v204.8H0V0z m0 409.6h1228.8v204.8H0V409.6z m614.4 409.6h614.4v204.8H614.4V819.2z', type: 'cmd', title: '居右' },
  { size: 13, name: 'insertOrderedList', icon: 'M256 85.333C256 38.205 294.085 0 341.124 0h597.752C985.89 0 1024 37.876 1024 85.333c0 47.129-38.085 85.334-85.124 85.334H341.124C294.11 170.667 256 132.79 256 85.333zM85.333 0h85.334v85.333H85.333V0zM256 512c0-47.128 38.085-85.333 85.124-85.333h597.752c47.013 0 85.124 37.876 85.124 85.333 0 47.128-38.085 85.333-85.124 85.333H341.124C294.11 597.333 256 559.457 256 512z m0 426.667c0-47.129 38.085-85.334 85.124-85.334h597.752c47.013 0 85.124 37.877 85.124 85.334 0 47.128-38.085 85.333-85.124 85.333H341.124C294.11 1024 256 986.124 256 938.667zM0 0h85.333v85.333H0V0z m85.333 170.667h85.334V256H85.333v-85.333z m0-85.334h85.334v85.334H85.333V85.333zM0 341.333h85.333v85.334H0v-85.334z m85.333 0h85.334v85.334H85.333v-85.334z m0 85.334h85.334V512H85.333v-85.333zM0 512h85.333v85.333H0V512z m0 85.333h85.333v85.334H0v-85.334z m85.333 0h85.334v85.334H85.333v-85.334zM0 768h85.333v85.333H0V768z m85.333 0h85.334v85.333H85.333V768z m0 85.333h85.334v85.334H85.333v-85.334z m0 85.334h85.334V1024H85.333v-85.333z m-85.333 0h85.333V1024H0v-85.333z', type: '', title: '有序列表' },
  { size: 13, name: 'insertUnorderedList', icon: 'M255.999 85.332C255.999 38.205 294.084 0 341.124 0h597.749c47.015 0 85.125 37.877 85.125 85.332 0 47.13-38.085 85.335-85.125 85.335H341.124c-47.015 0-85.125-37.877-85.125-85.335z m0 426.667c0-47.127 38.085-85.332 85.125-85.332h597.749c47.015 0 85.125 37.875 85.125 85.332 0 47.13-38.085 85.33-85.125 85.33H341.124c-47.015-0.001-85.125-37.871-85.125-85.33z m0 426.668c0-47.13 38.085-85.34 85.125-85.34h597.749c47.015 0 85.125 37.88 85.125 85.34 0 47.125-38.085 85.33-85.125 85.33H341.124c-47.015 0-85.125-37.88-85.125-85.33zM0 510.291c0-47.127 38.085-85.332 85.125-85.332h9.595c47.015 0 85.125 37.877 85.125 85.332 0 47.127-38.085 85.337-85.125 85.337h-9.595C38.11 595.628 0 557.748 0 510.291z m0 0c0-47.127 38.085-85.332 85.125-85.332h9.595c47.015 0 85.125 37.877 85.125 85.332 0 47.127-38.085 85.337-85.125 85.337h-9.595C38.11 595.628 0 557.748 0 510.291zM0 85.332C0 38.205 38.085 0 85.125 0h9.595c47.015 0 85.125 37.877 85.125 85.332 0 47.127-38.085 85.337-85.125 85.337h-9.595C38.11 170.669 0 132.79 0 85.332z m0 853.326c0-47.125 38.085-85.33 85.125-85.33h9.595c47.015 0 85.125 37.88 85.125 85.33 0 47.13-38.085 85.34-85.125 85.34h-9.595C38.11 1023.997 0 986.117 0 938.658z', type: '', title: '无序列表' },
  { size: 13, name: 'indent', icon: 'M261.438-0.001h756.65v252.216h-756.65V0zM9.222 385.89h1008.867v252.217H9.222V385.89zM9.222 771.782h1008.867v252.217H9.222V771.782zM5.911-0.001l226.995 126.108L5.911 252.215z', type: 'cmd', title: '首行缩进' },
  { size: 18, name: 'formatmatch', icon: 'M293.5 463.9H767c44.2 0 61.4 106 61.6 224 0.2 118-44.3 224-79.6 224H640.9c-4.1 0-6.9-4.1-5.4-7.9 5.1-13 13.7-39.6 9.9-63-5.3-32.4-16.5-58.8-16.5-58.8s8.3 23.9-25.8 68.7c-31.2 41-58.9 55.7-68.1 59.7-1.9 0.8-3.9 1.3-6 1.3H184.2c-24.3 0-44-20.2-43-44.8 0.3-7.4 2.6-14.7 6.5-21l48.7-81.2c35.5-59.1 54.2-126.8 54.2-195.7V507c-0.1-23.8 19.2-43.1 42.9-43.1z m213.7-158.1V155.1c0-23.8 19.3-43.1 43.1-43.1s43.1 19.3 43.1 43.1v150.7h160.8c23.8 0 43.1 19.3 43.1 43.1V392c0 23.8-19.3 43.1-43.1 43.1H323.5c-23.8 0-43.1-19.3-43.1-43.1v-43.1c0-23.8 19.3-43.1 43.1-43.1h183.7z', type: '', title: '格式化为纯文本)' },
  { size: 18, name: 'fullscreen', icon: 'M419.5 128.25c0-19.33-15.67-35-35-35H127.11c-10.27-1.21-20.97 2.12-28.85 10-8.33 8.33-11.57 19.81-9.75 30.6v255.4c0 19.33 15.67 35 35 35s35-15.67 35-35V213l201 201 0.25 0.25c0.42 0.42 0.85 0.83 1.29 1.22a34.789 34.789 0 0 0 19.95 8.85c0.04 0 0.08 0.01 0.12 0.01 0.39 0.04 0.77 0.06 1.16 0.08 0.18 0.01 0.37 0.03 0.55 0.04h0.17c0.5 0.02 1.01 0.04 1.51 0.04 1.02 0 2.04-0.05 3.06-0.14 0.1-0.01 0.2-0.01 0.29-0.02 0.25-0.02 0.49-0.06 0.74-0.09 0.32-0.04 0.64-0.07 0.96-0.12 0.1-0.01 0.2-0.03 0.3-0.05a34.86 34.86 0 0 0 10.42-3.34c0.01 0 0.01-0.01 0.02-0.01 0.77-0.39 1.53-0.81 2.28-1.26 0 0 0.01 0 0.01-0.01 0.68-0.41 1.34-0.85 1.99-1.3a35.624 35.624 0 0 0 2.14-1.62c0.1-0.08 0.19-0.17 0.29-0.25 0.48-0.4 0.95-0.82 1.41-1.26 0.17-0.16 0.34-0.32 0.5-0.48 0.11-0.11 0.22-0.21 0.33-0.31 0.41-0.41 0.8-0.83 1.19-1.25l0.05-0.05a31.578 31.578 0 0 0 1.76-2.13c0.99-1.29 1.89-2.63 2.67-4.02l0.03-0.06a36.2 36.2 0 0 0 2.16-4.54c0.01-0.03 0.02-0.05 0.03-0.08 0.3-0.77 0.57-1.54 0.81-2.33 0.01-0.02 0.01-0.04 0.02-0.06 0.24-0.77 0.44-1.55 0.62-2.33 0.03-0.12 0.05-0.23 0.08-0.35 0.16-0.71 0.29-1.43 0.41-2.15 0.01-0.08 0.03-0.16 0.04-0.24 0.11-0.76 0.2-1.53 0.26-2.29 0.01-0.18 0.03-0.35 0.04-0.53 0.05-0.78 0.09-1.56 0.09-2.34v-0.26c0-10.92-5.01-20.68-12.85-27.1l-198.9-198.9H384.5c19.33 0.03 35-15.64 35-34.97zM907.5 616.25c-19.33 0-35 15.67-35 35V828L673.59 629.09c-6.42-7.84-16.17-12.84-27.09-12.84h-0.25c-0.78 0-1.57 0.04-2.35 0.09-0.17 0.01-0.35 0.02-0.52 0.04-0.77 0.06-1.53 0.15-2.3 0.26-0.08 0.01-0.15 0.03-0.23 0.04-0.73 0.11-1.45 0.25-2.17 0.41-0.11 0.03-0.23 0.05-0.34 0.07-0.79 0.18-1.57 0.39-2.34 0.63-0.02 0-0.03 0.01-0.04 0.01-0.79 0.24-1.57 0.52-2.35 0.82-0.02 0.01-0.04 0.02-0.06 0.02-1.56 0.61-3.08 1.33-4.56 2.17-0.01 0.01-0.02 0.01-0.03 0.02-1.4 0.79-2.75 1.69-4.05 2.7l-0.3 0.24a38.01 38.01 0 0 0-3.11 2.75c-0.11 0.11-0.22 0.23-0.33 0.35-0.15 0.15-0.3 0.31-0.44 0.47-0.45 0.48-0.89 0.97-1.31 1.47l-0.21 0.24c-0.51 0.62-0.99 1.25-1.45 1.89-0.06 0.08-0.11 0.16-0.17 0.24-2 2.84-3.53 5.92-4.58 9.11-0.02 0.05-0.03 0.1-0.05 0.15-0.5 1.55-0.9 3.13-1.18 4.73-0.03 0.16-0.05 0.32-0.08 0.48-0.12 0.76-0.23 1.52-0.3 2.28 0 0.04-0.01 0.08-0.01 0.12-0.07 0.71-0.1 1.42-0.12 2.14-0.01 0.2-0.01 0.4-0.01 0.61-0.01 0.74 0 1.48 0.03 2.22 0 0.07 0.01 0.14 0.02 0.21 0.04 0.7 0.1 1.4 0.18 2.1l0.06 0.47c0.2 1.57 0.51 3.12 0.93 4.65l0.06 0.22c0.44 1.58 0.99 3.13 1.65 4.65 0.02 0.03 0.03 0.07 0.04 0.1 0.66 1.5 1.43 2.96 2.31 4.37 0.05 0.07 0.09 0.15 0.14 0.22 0.85 1.34 1.8 2.63 2.85 3.87l0.35 0.41c0.52 0.59 1.05 1.18 1.61 1.74l0.25 0.25 201 201H646.5c-19.33 0-35 15.67-35 35s15.67 35 35 35h261c19.33 0 35-15.67 35-35v-261c0-19.36-15.67-35.03-35-35.03zM923.41 97.08c-0.15-0.08-0.3-0.16-0.45-0.23-0.13-0.06-0.26-0.13-0.39-0.19a35.062 35.062 0 0 0-19.66-3.4H646.5c-19.33 0-35 15.67-35 35s15.67 35 35 35h175.75l-200.5 200.5-0.75 0.74c-0.56 0.56-1.1 1.15-1.62 1.74l-0.35 0.41c-1.05 1.24-2 2.53-2.85 3.87-0.04 0.07-0.09 0.14-0.13 0.21-0.88 1.41-1.66 2.87-2.32 4.37-0.01 0.03-0.03 0.06-0.04 0.1-0.66 1.52-1.22 3.07-1.66 4.65l-0.06 0.21c-0.42 1.53-0.73 3.09-0.93 4.66l-0.06 0.47c-0.08 0.7-0.15 1.4-0.18 2.11 0 0.07-0.01 0.14-0.02 0.21-0.04 0.74-0.04 1.48-0.03 2.22 0 0.2 0.01 0.4 0.01 0.61 0.02 0.71 0.06 1.42 0.12 2.13 0 0.04 0 0.08 0.01 0.12 0.07 0.76 0.18 1.52 0.3 2.28 0.03 0.16 0.05 0.32 0.08 0.48 0.28 1.6 0.67 3.17 1.18 4.73 0.02 0.05 0.03 0.1 0.05 0.16 0.54 1.64 1.2 3.24 1.99 4.8 0 0 0 0.01 0.01 0.01a34.84 34.84 0 0 0 2.58 4.29c0.06 0.09 0.12 0.17 0.18 0.26 0.46 0.64 0.93 1.27 1.44 1.88 0.07 0.09 0.15 0.18 0.23 0.26 0.41 0.49 0.84 0.97 1.28 1.44 0.15 0.16 0.3 0.32 0.46 0.48 0.11 0.11 0.21 0.23 0.32 0.34 0.42 0.42 0.85 0.83 1.29 1.22l0.01 0.01c0.59 0.53 1.19 1.03 1.81 1.51 0.11 0.08 0.21 0.16 0.32 0.25 1.3 1 2.64 1.9 4.04 2.69 0.01 0.01 0.03 0.01 0.04 0.02 1.47 0.84 2.99 1.56 4.55 2.16 0.02 0.01 0.05 0.02 0.07 0.03 0.77 0.3 1.55 0.57 2.34 0.81 0.02 0.01 0.03 0.01 0.05 0.02 0.77 0.24 1.55 0.44 2.34 0.62 0.11 0.03 0.23 0.05 0.34 0.08 0.72 0.16 1.44 0.3 2.16 0.41 0.08 0.01 0.15 0.03 0.23 0.04 0.76 0.11 1.53 0.2 2.3 0.26 0.17 0.01 0.35 0.03 0.52 0.04 0.22 0.02 0.45 0.04 0.67 0.05 0.56 0.03 1.12 0.04 1.68 0.04h0.75c11.84 0 22.31-5.89 28.64-14.89L872.5 212v177.25c0 19.33 15.67 35 35 35s35-15.67 35-35v-261c0-13.6-7.76-25.38-19.09-31.17zM419.41 648.15c-0.01-0.18-0.02-0.35-0.04-0.53-0.06-0.77-0.15-1.53-0.26-2.29-0.01-0.08-0.03-0.16-0.04-0.24-0.11-0.72-0.25-1.44-0.41-2.15-0.03-0.12-0.05-0.23-0.08-0.35-0.18-0.78-0.39-1.56-0.62-2.33-0.01-0.02-0.01-0.04-0.02-0.06-0.24-0.78-0.51-1.56-0.81-2.33-0.01-0.03-0.02-0.05-0.03-0.08-0.6-1.55-1.32-3.07-2.16-4.54-0.01-0.02-0.02-0.03-0.03-0.05-0.79-1.39-1.69-2.73-2.68-4.03-0.08-0.11-0.17-0.22-0.25-0.32-0.48-0.61-0.98-1.22-1.51-1.8 0-0.01-0.01-0.01-0.01-0.02-0.39-0.43-0.8-0.86-1.22-1.28-0.11-0.11-0.23-0.21-0.34-0.32-0.16-0.15-0.32-0.31-0.48-0.46-0.47-0.44-0.95-0.87-1.44-1.28-0.09-0.07-0.17-0.15-0.26-0.23-0.61-0.51-1.24-0.98-1.88-1.44-0.08-0.06-0.17-0.12-0.26-0.18a34.84 34.84 0 0 0-4.29-2.58s-0.01 0-0.01-0.01a34.455 34.455 0 0 0-4.96-2.04c-1.55-0.5-3.12-0.89-4.71-1.18-0.17-0.03-0.33-0.06-0.5-0.08-0.75-0.12-1.51-0.23-2.26-0.3-0.05 0-0.1-0.01-0.15-0.01-0.7-0.06-1.4-0.1-2.1-0.12-0.21-0.01-0.41-0.01-0.62-0.01-0.74-0.01-1.47 0-2.21 0.03-0.08 0-0.15 0.01-0.23 0.02-0.7 0.04-1.4 0.1-2.09 0.18l-0.47 0.06c-1.57 0.2-3.12 0.51-4.66 0.93l-0.21 0.06c-1.58 0.44-3.14 0.99-4.66 1.66-0.03 0.01-0.06 0.02-0.08 0.04-1.5 0.66-2.97 1.44-4.38 2.32-0.07 0.04-0.14 0.08-0.2 0.13-1.34 0.85-2.64 1.8-3.88 2.86-0.13 0.11-0.27 0.23-0.4 0.35-0.59 0.52-1.18 1.05-1.74 1.62l-0.77 0.73L158.5 827V651.25c0-19.33-15.67-35-35-35s-35 15.67-35 35v254.9c-1.82 10.79 1.42 22.27 9.75 30.6 2.84 2.84 6.05 5.08 9.47 6.74 4.74 2.4 10.1 3.76 15.78 3.76h261c19.33 0 35-15.67 35-35s-15.67-35-35-35H207.25l197.36-197.36c9-6.33 14.89-16.79 14.89-28.64v-0.75-0.01c0-0.78-0.04-1.56-0.09-2.34z', type: '', title: '全屏' },
]
const colors = {
  main: ['#000000', '#ffffff', '#eeece1', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c'],
  hex: [['#7f7f7f', '#f2f2f2'], ['#0d0d0d', '#808080'], ['#1c1a10', '#ddd8c3'], ['#0e243d', '#c6d9f0'], ['#233f5e', '#dae5f0'], ['#632623', '#f2dbdb'], ['#4d602c', '#eaf1de'], ['#3f3150', '#e6e0ec'], ['#1e5867', '#d9eef3'], ['#99490f', '#fee9da']],
  hot: ['#c21401', '#ff1e02', '#ffc12a', '#ffff3a', '#90cf5b', '#00af57', '#00afee', '#0071be', '#00215f', '#72349d'],
}

const colorPlan = ref([])

const table = ref({ line: 5, cell: 5 })

function btnTable() {
  restoreSelection();
  var r = void 0,
    rowNum = table.value.line,
    colNum = table.value.cell,
    c = void 0;
  var html =
    '<table style="border-collapse:collapse;" width="300px" cellpadding="1" cellspacing="1">';
  for (r = 0; r < rowNum; r++) {
    html += "<tr>";
    for (c = 0; c < colNum; c++) {
      html += "<td style='border:1px solid #eee;padding:5px 3px;'>&nbsp;</td>";
    }
    html += "</tr>";
  }
  html += "</table><p><br></p>";
  btnCommand('insertHTML', html);
  setTableDrag();
}

function btnKeypress(e) {
  isImage.value = false;
  isTable.value = false;
  if (e.srcElement.innerHTML == "") {
    btnCommand('insertHTML', '&nbsp;');
  }
}

function kenter(e) {
  saveSelection(e);
}
function closeModel() {
  icons.forEach(v => { v.select = false });
  isModle.value = "";
  isImage.value = false;
  isTable.value = false;
}
function mousedown(e) {
  closeModel();
}
function getoff(img) {
  var left = img.offsetLeft;
  var top = img.offsetTop;
  var current = img.offsetParent;

  while (current && current.getAttribute('data') !== 'editor') {
    left += current.offsetLeft;
    top += current.offsetTop;
    current = current.offsetParent;
  }
  return { left, top };
}

function getCurrentRange(e) {
  // 获取当前的选区
  const selection = window.getSelection() as Selection
  if (selection.rangeCount === 0) {
    return selectedRange.value && selectedRange.value
  }
  let range = selection.getRangeAt(0)
  if (String(range.commonAncestorContainer.parentElement.contentEditable) != 'true') {
    return selectedRange.value;
  }
  return range;
}

// 保存当前的选区
function saveRange(range: any) {
  if (range) {
    // 保存已有选区
    selectedRange.value = range;
    return;
  }
  var selection = window.getSelection();
  if (selection.rangeCount === 0) {
    return;
  }
  var range = selection.getRangeAt(0);
  if (editor.value?.contains(range.commonAncestorContainer)) {
    selectedRange.value = range;
  }
}

function setTableDrag() {
  nextTick(() => {
    editor.value?.querySelectorAll('table').forEach(table => {
      table.onmousemove = e => {
        if (!table.className.includes('hoverTable')) {
          table.className = table.className + ' hoverTable';
        }
      }
      table.onmouseout = e => {
        table.className = table.className.replace(/\shoverTable/g, '')
      }
      // 取最后一个td
      let lastTd = table.querySelectorAll('td')[table.querySelectorAll('td').length - 1];
      // 拖动table长宽事件
      lastTd.onmousemove = e => {
        if ((event.offsetX > lastTd.offsetWidth - 15) && (event.offsetY > lastTd.offsetHeight - 15)) {
          lastTd.style.cursor = "nw-resize";
          let disX = 0;//鼠标按下时光标的X值
          let disW = 0;
          let diyY = 0;
          let { clientWidth, clientHeight, offsetHeight, offsetWidth } = table;
          lastTd.onmousedown = lv => {
            let ev = e || window.event;
            disX = ev.clientX; // 获取鼠标按下时光标x的值
            diyY = ev.clientY;
            document.onmousemove = (e) => {
              let ev = e || window.event;
              let W = ev.clientX - disX + clientWidth;
              let H = ev.clientY - diyY + clientHeight;
              table.style.width = W + 'px';
              table.style.height = H + 'px';
            }
            document.onmouseup = () => {
              document.onmousemove = null;
              document.onmouseup = null;
            }
          }
        } else {
          lastTd.style.cursor = "default";
          lastTd.onmousedown = null;
        }
      }
    })
  })
}

// https://86edu.oss-cn-hangzhou.aliyuncs.com/beautifulschool/pic/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230109090403_1673226272634.png
function setImgDrag() {
  nextTick(() => {
    editor.value?.querySelectorAll('img').forEach(images => {
      images.onclick = e => {
        // 是否开启尺寸修改
        let resizeable = false
        // 鼠标按下时的坐标，并在修改尺寸时保存上一个鼠标的位置
        let clientX, clientY
        // div可修改的最小宽高
        let minW = 8;
        let minH = 8;
        // 鼠标按下时的位置，使用n、s、w、e表示
        let direc = '';
        let isSelectImage = images?.className?.includes('hoverImage');
        if (!isSelectImage) {
          editor.value?.blur();
          editor.value.ondragstart = e => { return false }
          editor.value.onselectstart = e => { return false }
          images.focus();
          images.className = images.className + ' hoverImage';
          document.onmousemove = e => {
            let d = getDirection(e, images)
            let cursor
            if (d === '') cursor = 'default';
            else cursor = d + '-resize';
            // 修改鼠标显示效果
            images.style.cursor = cursor;
            // 当开启尺寸修改时，鼠标移动会修改div尺寸
            if (resizeable) {
              // 鼠标按下的位置在右边，修改宽度
              if (direc.indexOf('e') !== -1) {
                images.style.width = Math.max(minW, images.offsetWidth + (e.clientX - clientX)) + 'px'
                clientX = e.clientX
              }

              // 鼠标按下的位置在上部，修改高度
              if (direc.indexOf('n') !== -1) {
                images.style.height = Math.max(minH, images.offsetHeight + (clientY - e.clientY)) + 'px'
                clientY = e.clientY
              }
              // 鼠标按下的位置在底部，修改高度
              if (direc.indexOf('s') !== -1) {
                images.style.height = Math.max(minH, images.offsetHeight + (e.clientY - clientY)) + 'px'
                clientY = e.clientY
              }

              // 鼠标按下的位置在左边，修改宽度
              if (direc.indexOf('w') !== -1) {
                images.style.width = Math.max(minW, images.offsetWidth + (clientX - e.clientX)) + 'px'
                clientX = e.clientX
              }
            }
          }
          document.onmouseup = e => {
            // images.className = images.className.replace(/\shoverImage/g, '');
            if (images) {
              images.style.cursor = "default";
              // images.className = images.className.replace(/\shoverImage/g, '');
            }
            document.onmousemove = null;
            resizeable = false;
            editor.value.ondragstart = () => { return true }
            editor.value.onselectstart = () => { return true }
          }
          images.onmousedown = e => {
            let d = getDirection(e, images)
            // 当位置为四个边和四个角时才开启尺寸修改
            if (d !== '') {
              resizeable = true
              direc = d
              clientX = e.clientX
              clientY = e.clientY
            }
          }
        } else {
          images.className = images.className.replace(/\shoverImage/g, '');
          images.style.cursor = "default";
          document.onmousemove = null;
          editor.value?.focus();
          editor.value.ondragstart = null
          editor.value.onselectstart = null
        }
      }
    })
  })
}
// 获取鼠标所在对像的位置
function getDirection(ev, c) {
  let xP, yP, offset, dir;
  dir = '';
  xP = ev.offsetX;
  yP = ev.offsetY;
  offset = 10;

  if (yP < offset) dir += 'n';
  else if (yP > c.offsetHeight - offset) dir += 's';
  if (xP < offset) dir += 'w';
  else if (xP > c.offsetWidth - offset) dir += 'e';
  return dir;
}

function upfileImage(type) {
  restoreSelection();
  if (type == 2) {
    let html = `<img style="max-width:100%;border-radius:4px;" src=${upImageFile.value}>`;
    btnCommand('insertHTML', html);
    upImageFile.value = "";
    setImgDrag();
  } else {
    let files = input.value[0].files
    ps.upFile(files[0]).then(res => {
      let html = `<div style="display:inline-flex rel"><img style="max-width:100%;border-radius:4px;" src=${res}></div>`;
      btnCommand('insertHTML', html);
      setImgDrag();
    })
  }
}

// 鼠标事件
function mouseup(e) {
  saveSelection(e);
}

function btnFormula() {
  restoreSelection()
  btnCommand('insertHTML', `&nbsp;${formula.value.$textSvgElem.html()}&nbsp;`);
  closeModel()
}

const formula = ref(null);
function btnAction(item) {
  closeModel();
  if (item.type != 'cmd') {
    saveRange()
  }
  if (item.type == 'cmd') {
    btnCommand(item.name);
  } else if (item.name == 'quote') {
    let html = `<div style="padding: 15px;margin: 10px 0;border-left: 5px solid #00a3cf;background: #f6f6f6;"><p><br></p></div>`;
    btnCommand('insertHTML', html);
    var p = document.createElement('p');
    p.innerHTML = '<br>';
    editor.value?.appendChild(p)
  } else if (['fc', 'bc', 'fs', 'image', 'header', 'link', 'table'].includes(item.name)) {
    item.select = true;
    isModle.value = item.name;
  } else if (item.name == 'formula') {
    item.select = true;
    isModle.value = item.name;
    if (formula.value) {
      formula.value.destoryDom();
      formula.value = null;
    }
    formula.value = new formulaEditor()
    nextTick(() => {
      formula.value.create('#formula');
    })
  } else if (item.name == 'insertOrderedList') {
    let html = `<ol><li style="margin-left: 15px;list-style-type: inherit;"></li></ol>`;
    btnCommand('insertHTML', html);
  } else if (item.name == 'insertUnorderedList') {
    let html = `<ul><li style="margin-left: 15px;list-style-type: inherit;"></li></ul>`;
    btnCommand('insertHTML', html);
  } else if (item.name == 'formatmatch') {
    // this.$emit('input', editor.value?.innerText)
    emit('update:modelValue', editor.value?.innerText);
  } else if (item.name == 'fullscreen') {
    if (isScreen.value) {
      isScreen.value = false;
    } else {
      isScreen.value = true;
    }
  }
}
function btnFontSize(e) {
  if (e.target.dataset.fs) {
    restoreSelection()
    btnCommand('fontsize', parseInt(e.target.dataset.fs));
  }
}
function btnHeader(e) {
  if (e.target.dataset.item) {
    restoreSelection()
    btnCommand('formatBlock', e.target.dataset.item);
  }
}
function btnColor(e) {
  if (e.target.dataset.color) {
    restoreSelection()
    btnCommand(isModle.value == 'fc' ? 'foreColor' : 'hiliteColor', e.target.dataset.color);
  }
}
function btnLink(e) {
  if (selectedRange.value && selectedRange.value.toString()) {
    restoreSelection();
    var innerDom = selectedRange.value.extractContents();
    var link = document.createElement("a");
    link.setAttribute("href", linkText.value);
    link.style.color = "#409eff";
    link.target = "_blank"
    link.innerHTML = selectedRange.value.toString();
    link.append(innerDom);
    selectedRange.value.insertNode(link);
  } else {
    restoreSelection();
    btnCommand('CreateLink', linkText.value);
  }
  closeModel();
  linkText.value = "";
}
function changeText(e) {
  // this.$emit('input', e.srcElement.innerHTML)
  emit('update:modelValue', e.srcElement.innerHTML);
}
function btnCommand(cmd, html: any = "") {
  html = html ? html : false;
  // restoreSelection();
  // editor.value?.focus();
  document.execCommand(cmd, false, html);
  closeModel();
  setImgDrag();
}
function blurFunc() {
  isChange.value = true;
}


function saveSelection(e) {
  selectedRange.value = this.getCurrentRange(e);
  // console.log(selectedRange.value)
}
function restoreSelection() { //重置为上个range
  var selection: any = window.getSelection();
  if (selectedRange.value) {
    try {
      selection.removeAllRanges();
    } catch (ex) {
      (document.body as any).createTextRange().select();
      (document as any).selection.empty();
    };
    selection.addRange(selectedRange.value);
  }
  editor.value?.focus();
}

function getSelectionHTML() {
  if (window.getSelection) {
    var sel: any = window.getSelection();
    if (sel.rangeCount > 0) {
      return sel;
    }
  }
}
// 格式化 hex 颜色值
function parseColor(hexStr) {
  if (hexStr.length === 4) {
    hexStr = '#' + hexStr[1] + hexStr[1] + hexStr[2] + hexStr[2] + hexStr[3] + hexStr[3]
  } else {
    return hexStr
  }
}
// RGB 颜色 转 HEX 颜色
function rgbToHex(r, g, b) {
  let hex = ((r << 16) | (g << 8) | b).toString(16)
  return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex
}
// HEX 转 RGB 颜色
function hexToRgb(hex: any) {
  hex = parseColor(hex)
  let rgb: any = []
  for (let i = 1; i < 7; i += 2) {
    rgb.push(parseInt('0x' + hex.slice(i, i + 2)))
  }
  return rgb
}
// 计算渐变过渡颜色
function gradient(startColor, endColor, step) {
  // 讲 hex 转换为 rgb
  let sColor = hexToRgb(startColor)
  let eColor = hexToRgb(endColor)

  // 计算R\G\B每一步的差值
  let rStep = (eColor[0] - sColor[0]) / step
  let gStep = (eColor[1] - sColor[1]) / step
  let bStep = (eColor[2] - sColor[2]) / step


  let gradientColorArr: any = []
  // 计算每一步的hex值
  for (let i = 0; i < step; i++) {
    gradientColorArr.push(rgbToHex(parseInt(rStep * i + sColor[0]), parseInt(gStep * i + sColor[1]), parseInt(bStep * i + sColor[2])))
  }
  gradientColorArr.push(endColor)
  return gradientColorArr
}

watch(() => ps.modelValue, (news, old) => {
  if (isChange.value) {
    innerText.value = ps.modelValue;
    setImgDrag();
    setTableDrag();
  }
})

onMounted(() => {
  colors.hex.forEach(v => {
    colorPlan.value.push(gradient(v[0], v[1], 5))
  })
  if (ps.modelValue && !innerText.value) {
    innerText.value = ps.modelValue;
    setTableDrag();
    setImgDrag()
  }
})
</script>
<style lang='less'>
.sIcon {
  svg {
    fill: #00afee !important;
  }
}
.hoverTable {
  border: 2px dashed #00afee !important;
  position: relative;
  z-index: 10;
  tr:last-child td:last-child {
    position: relative;
    // cursor: nw-resize;
    &:after {
      display: inline-block;
      position: absolute;
      bottom: -1px;
      right: -1px;
      content: " ";
      width: 0;
      height: 0;
      border-width: 15px 15px 0 0;
      border-style: solid;
      border-color: transparent #00afee transparent transparent;
    }
  }
}
.hoverImage {
  border: 3px dashed #00afee !important;
  position: relative;
  z-index: 10;
  &:after {
    z-index: 50;
    display: inline-block;
    position: absolute;
    bottom: -1px;
    right: -1px;
    content: " ";
    width: 0;
    height: 0;
    border-width: 15px 15px 0 0;
    border-style: solid;
    border-color: transparent #00afee transparent transparent;
  }
}
</style>